<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('持股及交易汇总表') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('员工名称')" prop="userId">
        <UserSelect v-model="queryParams.userId" :placeholder="$t('员工名称')" clearable />
      </el-form-item>
      <el-form-item :label="$t('所属部门')" prop="deptId">
        <tree-select
          v-model="queryParams.deptId"
          :default-expand-all="true"
          :data="initData.deptOptions"
          :placeholder="$t('请选择')"
          node-key="id"
          clearable
        >
          <label
            slot="option-label"
            slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }"
            :class="labelClassName"
          >
            {{ $t(node.label) }}
            <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
          </label>
        </tree-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      tooltip-effect="darkTable"
      :data="riskSharesStaffList"
      :span-method="group"
      class="noneHoverBg"
      border
    >
      <el-table-column :label="$t('员工名称')" align="center" show-overflow-tooltip prop="userName">
        <template slot-scope="scope">
          <el-link type="primary" @click="updateHandle(scope.row)">{{ scope.row.userName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('所属部门')" align="center" show-overflow-tooltip prop="deptName" />
      <el-table-column :label="$t('填报时间')" align="center" show-overflow-tooltip prop="fillingTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.fillingTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('股票名称')" align="center" show-overflow-tooltip prop="stockName" />
      <el-table-column :label="$t('股票代码')" align="center" show-overflow-tooltip prop="stockCode" />
      <el-table-column :label="$t('预计交易时间')" align="center" show-overflow-tooltip prop="estimatedTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.estimatedTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('交易状态')" align="center" show-overflow-tooltip prop="status" />
      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="200">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['risk:staff:edit']"
            size="small"
            type="text"
            icon="el-icon-view"
            @click="updateHandle(scope.row)"
          >{{ $t('查看') }}</el-button>
          <!--          <el-button-->
          <!--            v-hasPermi="['risk:staff:remove']"-->
          <!--            size="small"-->
          <!--            type="text"-->
          <!--            icon="el-icon-delete"-->
          <!--            @click="deleteHandle(scope.row)"-->
          <!--          >{{ $t('删除') }}</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改员工持有股票信息对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <riskSharesStaffForm ref="riskSharesStaffForm" />
    </el-dialog>
  </div>
</template>

<script>
import { listRiskSharesStaffJuri, delRiskSharesStaff, exportRiskSharesStaff } from '@/api/deal/risk/shares/staff/riskSharesStaff.js'
import riskSharesStaffForm from './riskSharesStaffForm.vue'
import { treeselect } from '@/api/system/dept'
import TreeSelect from '@/components/TreeSelect'
export default {
  components: {
    riskSharesStaffForm,
    TreeSelect
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 员工持有股票信息表格数据
      riskSharesStaffList: [],
      // 弹出层标题
      title: '持股及交易汇总表',
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        userId: undefined,
        deptId: undefined,
        fillingTime: undefined,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      initData: {
        deptOptions: []
      }
    }
  },
  computed: {
    groupId() { // 获取项目名称
      return new Set(this.riskSharesStaffList.map(o => o.id))
    }
  },
  created() {
    this.initDataMethod()
    this.getList()
  },
  methods: {
    /** 查询员工持有股票信息列表 */
    getList() {
      this.loading = true
      listRiskSharesStaffJuri(this.queryParams).then(response => {
        this.riskSharesStaffList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        userId: undefined,
        deptId: undefined,
        fillingTime: undefined,
        remark: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.riskSharesStaffForm.init(null)
      })
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.riskSharesStaffForm.init(row)
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return delRiskSharesStaff(row.id)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(function() {
      })
    },
    /** 导出按钮操作 */
    exportHandle() {
      const queryParams = this.queryParams
      this.$confirm(this.$t('是否确认导出数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return exportRiskSharesStaff(queryParams)
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {
      })
    },
    // 初始化数据
    initDataMethod() {
      treeselect().then(response => {
        this.initData.deptOptions = response.data
      })
    },
    group({ row, rowIndex, columnIndex }) {
      const cols = [0, 1, 2, 7]
      for (let i = 0; i < cols.length; i++) {
        if (columnIndex === cols[i]) {
          const len = this.dealGroup(row.id)
          const lenName = this.dealLen(row.id)
          if (rowIndex === lenName) {
            return {
              rowspan: len,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    },
    dealLen(name) {
      const tmp = Array.from(this.groupId)
      const index = tmp.indexOf(name)
      let len = 0
      for (let i = 0; i < index; i++) {
        len += this.dealGroup(tmp[i])
      }
      return len
    },
    dealGroup(name) {
      return this.riskSharesStaffList.filter(o => o.id === name).length
    }
  }
}
</script>
